<template>
  <div class="mapMaker" id="mapContainer"></div>
</template>

<script>
  export default {
    props: ['lat', 'lng'],
    data () {
      return {
        map: '',
        marker: ''
      }
    },
    mounted(){
      this.initMap()
    },
    methods: {
      reset(lng, lat){
        this.map.centerAndZoom(new BMap.Point(lng, lat), 19)
        this.marker.setPosition(new BMap.Point(lng, lat))
      },
      initMap(){
        let _this = this, point=new BMap.Point(this.lng, this.lat)
        _this.map = new BMap.Map('mapContainer', {
          enableMapClick: false,
          minZoom: 10
        })
        _this.map.centerAndZoom(point, 19)
        _this.map.enableScrollWheelZoom()
        // 添加个点
        _this.marker = new BMap.Marker(point)
        _this.marker.addEventListener('dragend', (e) => {
          this.$emit('move', e.point)
        })
        _this.map.addOverlay(_this.marker)
        _this.marker.enableDragging()
      }
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus">
  .mapMaker
    width 100%
    height 200px
</style>